<template>
  <div>
    left
    <el-button type="primary" size="small" @click="add">+1</el-button>
    count:{{ count }}

    <!--声明一个插槽区域-->
    <slot name="my100"></slot>

    <!-- 作用域插槽：通过插槽可以值参 相当于子传父 -->
    <slot name="my200" msg="hello vue.js" :user="userInfo"></slot>

    <slot name="my300" msg="hello vue.js" :user="userInfo"></slot>

    <!-- 插槽也可用作占位符  如果在父组件中调用时组件嵌套组件时就调用了 -->
  </div>
</template>

<script>
export default {
  name: "left",
  data() {
    return {
      count: 0,
      userInfo: {
        name: 'jack',
        age: 21,
        memo: '1234'
      }
    }
  },
  methods: {
    add() {
      this.count++
    }
  },
  created() {
    console.log('组件被创建了')
  },
  destroyed() {
    console.log('组件被销毁了')
  }
}
</script>

<style scoped>
.el-button {
  margin: 15px;
}

</style>
